<!-- 进度条 -->

<template>
  <div class="WorkbenchPersonal-MyBar">
    <div class="flex flexMiddle">
      <img :src="src" />
      <span>{{ title }}</span>
    </div>

    <div class="flexCC">
      <div class="flex1">
        <div :style="`width: ${percent}%`" />
      </div>
      <div class="flex0">{{ percent }}%</div>
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import UTIL from '../../UTIL'
import props from './props'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyBar',

  /**
   * 属性注册 (抽取以便查阅)
   */
  props,

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 图片路径
     */
    src() {
      return UTIL.getImg(this.img)
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
